<script setup lang="ts">
import type { LanguageSupport } from '@vben/common-ui';

import type { ExampleReport } from '#/api/iot/device/manage/model';

import { ref } from 'vue';

import { CodeMirror, useVbenDrawer } from '@vben/common-ui';

import { useClipboard } from '@vueuse/core';
import { Button, Space } from 'ant-design-vue';

import { exampleReport } from '#/api/iot/device/manage';

const { copy } = useClipboard({ legacy: true });

const exampleReportInfo = ref<ExampleReport>();

const language = ref<LanguageSupport>('json');

const [MqttDrawer, MqttDrawerApi] = useVbenDrawer({
  async onOpenChange(isOpen) {
    if (isOpen) {
      const { deviceSn, productKey } = MqttDrawerApi.getData();
      exampleReportInfo.value = await exampleReport({
        deviceSn,
        productKey,
      });

      exampleReportInfo.value.message = JSON.stringify(
        JSON.parse(exampleReportInfo.value.message),
        null,
        2,
      );
    }
  },
});
</script>

<template>
  <MqttDrawer title="属性上报示例">
    <Space class="w-full" direction="vertical">
      <div class="align-center flex w-full justify-between text-lg font-bold">
        <span>Topic：</span>
        <Button @click="copy(exampleReportInfo?.topic || '')">复制Topic</Button>
      </div>
      <div>{{ exampleReportInfo?.topic }}</div>
      <div class="mt-4 text-lg font-bold">上报示例：</div>
      <CodeMirror
        v-if="exampleReportInfo?.message"
        v-model="exampleReportInfo.message"
        :readonly="true"
        :language="language"
        class="h-[calc(100vh-80px)] w-full overflow-y-scroll text-[16px]"
        basic
        wrap
      />
    </Space>

    <template #footer>
      <Button @click="copy(exampleReportInfo?.message || '')">一键复制</Button>
    </template>
  </MqttDrawer>
</template>
